<template>
	<div class="productionBasismanagSoldout">
		<top></top>
		<div class="center">
			<left></left>
			<div class="right productionBasismanagSoldout">
				<div class="where">当前位置：分销后台><router-link to="/productionBasismanag">产品渠道管理</router-link>
				</div>
				<div style="height: 16px; width: 100%; background: #EFEFEF;"></div>
				<div class="o_ul">
					<router-link class="o_li" to="/productionBasismanag">产品渠道中心</router-link>
					<router-link class="o_li " to="/productionBasismanag/productionBasismanagSoldout">已下架的产品</router-link>
					<router-link class="o_li act" to="/productionBasismanag/productionBasismanagDj">自动生产对接</router-link>
				</div>
				
				<div class="t_add_cont">
					<router-link class="back" to="/productionBasismanag/productionBasismanagDj"><i class="el-icon-back"></i>返回自动生产对接</router-link>
					<!-- tips -->
					<div class="t_tips_box">
						<div>自动生产可以把订单信息通过接口自动提交给运营商或上游系统并返回生产信息</div>
						<div>申请自动生产接口对接
							<span @click="openwx" class="t_chatkf">联系客服微信</span>
						</div>
					</div>
					<div style='margin-bottom:10px'>
						<el-button
						@click="opendev('')"
						size="small"  type="danger">添加产品</el-button>
					</div>
					<!-- 列表 -->
					<el-table
					:header-cell-style="{background:'#E6E6E6',color:'#3D3D3D'}"
					:data="tableData"
					style="width: 100%">
						<el-table-column
							align="center"
							prop="name"
							label="产品名称">
						</el-table-column>
						<el-table-column
							align="center"
							prop="sku"
							label="产品编码">
						</el-table-column>
						<el-table-column
							align="center"
							prop="created_at"
							label="添加时间">
						</el-table-column>
						<el-table-column
							align="center"
							prop="kfpz"
							label="开发配置">
							<template slot-scope="scope">
								已配置
								<el-button
								@click="opendev(scope.row)"
								type="text">编辑</el-button>
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							label="操作">
							<template slot-scope="scope">
								<el-button @click="del(scope.row.up_id)" type="text">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					
					
				</div>
				
			</div>
		</div>
		<foot></foot>
		<!-- 二维码弹窗 -->
		<el-dialog
		title="联系微信客服"
		:visible.sync="chatwxshow"
		width="300px"
		>
			<img style="width: 100%;" src="../../../static/kefu.png" alt="">
		</el-dialog>
		<!-- 添加/编辑 -->
		<el-dialog
		title="添加/编辑"
		:visible.sync="addproshow"
		width="500px"
		>
			<el-form  label-width="120px">
                <el-form-item label="本地产品编码">
                    <el-input style="width:250px" v-model="inputadd.product_sku"
                      placeholder="请输入本地产品编码" size="small" ></el-input>
					  <el-button @click="checkbm(inputadd.product_sku)" type="primary">检测</el-button>
					  <div v-if="ischeck">
							<div v-if='nopz'>当前产品未配置</div>
					  		<div v-else>已配置,上游编码为{{upbm}}</div>
					  </div>
					  
                </el-form-item>
                <el-form-item label="对应上游编码">
                    <el-input v-model="inputadd.upstream_sku" placeholder="请输入对应上游编码" size="small" ></el-input>
                </el-form-item>
                <el-form-item v-for="(item,index) in inputlist" :key="index" :label="item.name">
                    <el-input @input="inputChange"  v-model="inputadd[item.key]" size="small" :type="item.type" ></el-input>
                </el-form-item>
				<el-form-item v-for="(item,index) in radiolist" :key="index" :label="item.name">
				
					<el-radio-group v-model="inputadd[item.key]">
					
						<el-radio @change="inputChange" v-for="(item2,index2) in item.data" 
						:key="index2"
						:label="item2.value" >{{item2.name}}</el-radio>
					</el-radio-group>
				</el-form-item>
            </el-form>
			<div class="t_btn_box">
				<el-button @click="addpro" type="primary">确定</el-button>
			</div>
		</el-dialog>
		
	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'


	export default {
		components: {
			"left": left,
			"top": top,
			"foot": foot
		},
		name: 'productionBasismanagDj',
		data() {
			return{
				tableData: [],
				//联系微信客服弹窗
				chatwxshow:false,
				//添加弹窗
				addproshow:false,
				//添加数据
				inputadd:{
					product_sku:'',
					upstream_sku:''
				},
				//动态input
				inputlist:[],
				//动态radio
				radiolist:[],
				//所有动态数据
				inputlistall:[],
				//y_name
				y_name:'',
				//是否点击检查
				ischeck:false,
				//没有配置
				nopz:true,
				//上游编码
				upbm:''
				
			}
		},
		created() {
			//获取上级数据
			this.getoldlist()
			//获取列表
			this.getlist()
		},

		methods: {
			//获取上级数据
			getoldlist(){
				axios.get('/api/plan-market/upstream/channel/config/list',{
					params:{
						channel_id:this.$route.query.channel_id
					}
				})
				.then((response) => {
					// console.log(response)
					this.y_name=response.data.data[0].y_name

					this.inputlistall=JSON.parse(response.data.data[0].upstream_config_type)
               		console.log(this.inputlistall)
					//添加数据绑定
					for(var i=0;i<this.inputlistall.length;i++){
						if(this.inputlistall[i].type=='text'){
							this.inputadd[this.inputlistall[i].key]=''
							this.inputlist.push(this.inputlistall[i])
						}else if(this.inputlistall[i].type=='radio'){
							this.inputadd[this.inputlistall[i].key]=null
							this.radiolist.push(this.inputlistall[i])
						}
						
					}
					this.inputadd.product_sku=''
					this.inputadd.upstream_sku=''
					
				})
			},
			//获取列表
			getlist(){
				axios.get('/api/plan-market/upstream/product/list',{
					params:{
						channel_id:this.$route.query.channel_id
					}
				})
				.then((response) => {
					// console.log(response.data.data)
					this.tableData=response.data.data
				})
			},
			//添加、编辑
			opendev(row){
				console.log(row)
				var that = this
				this.addproshow=true
				
				console.log(this.inputlistall)
				if(row!=''){
					var arr = [];
					for(let i=0;i<Object.keys(row.datas).length;i++){
						arr.push({name:Object.keys(row.datas)[i],value:row.datas[Object.keys(row.datas)[i]]})
					}
					console.log('==--===--===')
					console.log(arr)
					console.log(this.inputlistall)
					//说明是编辑
					this.inputadd.product_sku=row.sku
					this.inputadd.upstream_sku=row.upstream_product_name
					this.inputadd['up_id']=row.up_id
					for(var i=0;i<this.inputlistall.length;i++){
						for(var x=0;x<arr.length;x++){
							
							if(this.inputlistall[i].key==arr[x].name){
								if(this.inputlistall[i].type==="radio"){
									this.inputadd[`${this.inputlistall[i].key}`]=arr[x].value*1
								}else{
									console.log(this.inputlistall[i].key,this.inputlistall[i].type)
									this.inputadd[`${this.inputlistall[i].key}`]=arr[x].value
								}
							}
						}
						
					}
					console.log(this.inputadd)
				}else{
					this.ischeck=false
					this.inputadd.product_sku=''
					this.inputadd.upstream_sku=''
					this.inputadd['up_id']=''
					for(var i=0;i<this.inputlistall.length;i++){
						this.inputadd[`${this.inputlistall[i].key}`]=''
					}
					
				}
			},
			//确定提交
			addpro(){
				this.inputadd['channel_id']=this.$route.query.channel_id
				this.inputadd['y_name']=this.y_name

				axios.post('/api/plan-market/upstream/product/create',this.inputadd)
				.then((response) => {
					if(response.data.msg.code==0){
						console.log(response)
						this.$message({
							message: '操作成功',
							type: 'success'
						});
						//获取列表
						this.getlist()
						this.addproshow=false
					}else{
						this.$message.error(response.data.msg.info);
					}
					
				})
			},
			//检查编码
			checkbm(product_sku){
				axios.get('/api/plan-market/upstream/check/product',{
					params:{
						product_sku:product_sku
					}
				})
				.then((response) => {
					this.ischeck=true
					console.log(response)
					if(response.data.data==null){
						this.nopz=true
					}else{
						this.nopz=false
						this.upbm=response.data.data.upstream_product_name
					}
					
				})
			},
			//删除
			del(up_id){
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios.post('/api/plan-market/upstream/product/delete',{
						id:up_id
					})
					.then((response) => {
						console.log(response)
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						//获取列表
						this.getlist()
					})
				
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});          
				});
				
			},
			//点击打开客服二维码弹窗
			openwx(){
				this.chatwxshow=true
			},
			inputChange(){
				this.$forceUpdate();  //强制刷新
			}
			
		}
	}
</script>

<!-- 

shhhh
12312312312
samguo
chihihuh -->
<style scoped>
.t_add_cont{
	padding: 30px 10px;
}
.t_tips_box{
	background-color: #EEF7FF;
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	padding: 20px ;
	color: #7D7D7D;
	margin-bottom: 20px;
}
.t_chatkf{
	color: #237BFF;
	margin-left: 20px;
	cursor: pointer;
}
.back{
	color: black;
	margin-bottom:15px;
	display: block;
}
.t_btn_box{
	display: flex;
	justify-content: end;
}
</style>
<style lang="scss" scoped>
	.productionBasismanagSoldout {
		margin: 0;
		padding: 0;
		background: #EFEFEF;

		.see {
			color: #409EFF;
			margin: 20px 0;
			cursor: pointer;
		}

		.cpflex {
			display: flex;
			flex-wrap: wrap;

			.el-form-item {
				margin-bottom: 0px;
			}
		}

		.kucun {
			.el-input {
				width: 200px;
			}

			.list {
				display: flex;
				text-align: center;
				border-bottom: 1px #EAEAEA solid;

				.bor1 {
					border-right: 1px #EAEAEA solid;

					i {
						color: #409EFF;
						font-size: 14px;
						margin-left: 10px;
						cursor: pointer;
					}
				}

				.th {
					background: #F9F9F9;
					line-height: 45px;
					flex: 1;
					font-size: 14px;
					box-sizing: border-box;
				}

				.td {
					line-height: 45px;
					font-size: 14px;
					flex: 1;
					box-sizing: border-box;
					color: #666;
				}

				.td2 {
					flex: 1.5
				}
			}
		}

		.center {
			width: 1366px;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;

			.right {
				flex-basis: 1166px;
				background: #FFF;

				.o_ul {
					background: #F9F9F9;
					display: flex;

					.o_li {
						flex-basis: 160px;
						line-height: 45px;
						display: block;
						color: #727272;
						border-top: 3px #F9F9F9 solid;
						font-size: 14px;
						text-align: center;
					}

					.act {
						border-top: 3px #DD2727 solid;
						background: #FFFFFF;
					}
				}

				.title {
					border-bottom: 1px #EAEAEA solid;
					line-height: 45px;
					padding-left: 30px;
					font-size: 16px;
					background: #F9F9F9;
					color: #727272
				}

				.bsm {
					padding: 20px 20px 0 20px;

					.el-input {
						width: 220px;
					}
				}

				.row2 {
					color: #FFF;
					margin-top: 20px;

					a {
						color: #FFF;
					}
				}

				.con {
					margin: 20px;
					border: 1px #EAEAEA solid;

					.list {
						display: flex;
						text-align: center;
						border-bottom: 1px #EAEAEA solid;

						.bor1 {
							border-right: 1px #EAEAEA solid;

							i {
								color: #409EFF;
								font-size: 14px;
								margin-left: 10px;
								cursor: pointer;
							}
						}

						.th {
							background: #F9F9F9;
							line-height: 45px;
							flex: 1;
							font-size: 14px;
							box-sizing: border-box;
						}

						.td {
							line-height: 45px;
							font-size: 14px;
							flex: 1;
							box-sizing: border-box;
							color: #666;
						}

						.td2 {
							flex: 1.5
						}
					}
				}

				.el-pagination {
					text-align: right;
					margin-right: 20px;
					padding-bottom: 50px;
				}
			}
		}

	}
</style>
